<template>
    <div class="proxy-apply-main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">躺赚申请</span>
            </template>
        </van-nav-bar>
        <img class="imgx" src="../../assets/img/proxyapply.png" alt="">
        <div class="form-template">
            <van-field v-model="name" placeholder="姓名" clearable/>
            <div class="dingpro">
                <van-field v-model="phone" placeholder="电话" clearable/>
                <van-field v-model="msg" style="width:195px;" center clearable placeholder="请输入短信验证码" />
                <div class="getvalidateBtn" @click="getValidate">
                    <p v-if="isnotsend">获取验证码</p>
                    <van-count-down v-else :time="time" format="sss"/>
                </div>
            </div>
        </div>
        <img class="submit-btn" @click="postdata" src="../../assets/img/proxy-apply-btn.png" alt="">
    </div>
</template>
<script>
import {_ajaxApplyAgent} from "../../service/proxy"
import {_sendvalidatecode} from "../../service/user"
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            name:"",
            phone:"",
            msg:"",
            isnotsend:true,
            time:60000,
        }
    },
    methods:{
        onClickLeft(){
            this.$router.push("/own")
        },
        validatephone(val){
			let nub=val.replace(/\s*/g,"").replace("+86","")
			if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(nub))){ 
				return false; 
			} 
			return true
		},
        getValidate(){
			let _this=this
			if(this.validatephone(this.phone)){
				let nub=this.phone.replace(/\s*/g,"").replace("+86","")
				this.isnotsend=false
				setTimeout(()=>{
					_this.isnotsend=true
				},60000)
				_sendvalidatecode({mobile:nub}).then(res=>{
					_this.$toast(res.message)
				})
			}else{
				this.$toast.fail('请输入正确的手机号');
			}
        },
        vali(){
            if(this.name==""){
                return {data:false,msg:"姓名不能为空"}
            }else if(this.phone==""){
                return {data:false,msg:"电话不能为空"}
            }else if(!this.validatephone(this.phone)){
                return {data:false,msg:"请填写正确的电话号码"}
            }else if(this.msg==""){
                return {data:false,msg:"短信验证码不能为空"}
            }else{
                return {data:true}
            }
        },
        postdata(){
            let _this=this
            if(!this.vali().data){
                this.$toast(this.vali().msg)
                return
            }
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _ajaxApplyAgent({
                user_id:uid,
                mobile:this.phone,
                mobile_code:this.msg,
                realname:this.name
            }).then(res=>{
                console.log(res)
                this.$toast(res.message)
                this.$router.push("/procenter")
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}

.proxy-apply-main{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    .imgx{
        width: 100%;
    }
    .form-template{
        width: 100%;
        padding: 40px;
        /deep/.van-field{
            background-color: #efefef;
            margin-bottom: 9px;
            display: inline-block;
            height: 40px;
        }
        /deep/.van-field__control{
            .font-SC();
            font-size: 13px;
            color: #333;
        }
        .dingpro{
            /deep/.van-field{
                background-color: #efefef;
                margin-bottom: 9px;
                display: inline-block;
                height: 40px;
            }
            /deep/.van-field__control{
                font-family: 'DINPro Medium' !important;
                font-size: 13px;
                color: #333;
            }
        }
        .getvalidateBtn{
            display: inline-block;
            width: 100px;
            height: 40px;
            border: 1px solid #efefef;
            display: flex;
            justify-content: center;
            align-items: center;
            float: right;
            p{
                margin-bottom: 0;
            }
        }
    }
    .submit-btn{
        width: 367px;
        display: block;
        margin: 0 auto;
    }

    @media only screen and (min-device-height: 600px) and (max-device-height: 675px){
        .imgx{
            width: 100%;
            margin-top: -40px;
        }
        .form-template{
            width: 100%;
            padding: 10px 40px;
            /deep/.van-field{
                background-color: #efefef;
                margin-bottom: 9px;
                display: inline-block;
                height: 40px;
            }
            /deep/.van-field__control{
                .font-SC();
                font-size: 13px;
                color: #333;
            }
            .dingpro{
                /deep/.van-field{
                    background-color: #efefef;
                    margin-bottom: 9px;
                    display: inline-block;
                    height: 40px;
                }
                /deep/.van-field__control{
                    font-family: 'DINPro Medium' ;
                    font-size: 13px;
                    color: #333;
                }
            }
            .getvalidateBtn{
                display: inline-block;
                width: 100px;
                height: 40px;
                border: 1px solid #efefef;
                display: flex;
                justify-content: center;
                align-items: center;
                float: right;
            }
        }
        .submit-btn{
            width: 367px;
            display: block;
            margin: 0 auto;
        }
    }


}
</style>